<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>饼图选中交互 demo</title>
  <link rel="stylesheet" href="./assets/common.css">
  <style>
    html {
 font-family: "Helvetica Neue", "San Francisco", Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC",
"Microsoft YaHei", sans-serif;
    }
  </style>
</head>
<body>
<div>
  <canvas id="mountNode" style="position: relative;">
  </canvas>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script>
var data = [{ name: '芳华', percent: 0.4, a: '1' }, { name: '妖猫传', percent: 0.2, a: '1' }, { name: '机器之血', percent: 0.18, a: '1' }, { name: '心理罪', percent: 0.15, a: '1' }, { name: '寻梦环游记', percent: 0.05, a: '1' }, { name: '其他', percent: 0.12, a: '1' }];
var chart = new F2.Chart({
  id: 'mountNode',
  width: window.innerWidth,
  height: window.innerWidth > window.innerHeight ? window.innerHeight - 54 : window.innerWidth * 0.707,
  pixelRatio: window.devicePixelRatio
});
chart.source(data, {
  percent: {
    formatter: function formatter(val) {
      return val * 100 + '%';
    }
  }
});
chart.legend({
  position: 'right'
});
chart.tooltip(false);
chart.coord('polar', {
  transposed: true,
  radius: 0.85,
  innerRadius: 0.618
});
chart.axis(false);
chart.interval().position('a*percent').color('name', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0']).adjust('stack').style({
  lineWidth: 1,
  stroke: '#fff',
  lineJoin: 'round',
  lineCap: 'round'
});

chart.guide().html({
  position: [ '50%', '50%' ],
  html: '<div style="text-align: center;width: 100px;height: 72px;vertical-align: middle;">'
    + '<p id="number" style="font-size: 28px;margin: 10px 10px 5px;font-weight: bold;"></p>'
    + '<p id="name" style="font-size: 12px;margin: 0;"></p>'
    + '</div>'
});

chart.interaction('pie-select', {
  startEvent: 'tap',
  animate: {
    duration: 300,
    easing: 'backOut'
  },
  onEnd(ev) {
    const { shape, data, shapeInfo} = ev;
    if (shape) {
      $('#number').css('color', shapeInfo.color);
      $('#number').text(data.percent * 100 + '%');
      $('#name').text(data.name);
    }
  }
});

chart.render();
</script>
</body>
</html>
